<template>
    <el-tabs v-model="activeName" type="card">
        <el-tab-pane :label="$i18n.t('COLLECTION_RECORD')" name="record">
            <follow-record v-if="activeName === 'record'" />
        </el-tab-pane>
        <el-tab-pane :label="$i18n.t('COLLECTION_TRACK')" name="track">
            <collection-track v-if="activeName === 'track'" />
        </el-tab-pane>
        <el-tab-pane :label="$i18n.t('TEL_RECORD')" name="callRecord">
            <collection-call-record v-if="activeName === 'callRecord'"></collection-call-record>
        </el-tab-pane>
        <el-tab-pane :label="$i18n.t('SMS_RECORD')" name="SMSRecord">
            <collection-s-m-s-record v-if="activeName === 'SMSRecord'"></collection-s-m-s-record>
        </el-tab-pane>
        <el-tab-pane :label="$i18n.t('TEL_APPROVE')" name="TELApprove">
            <collection-tel-approve v-if="activeName === 'TELApprove'" />
        </el-tab-pane>
        <el-tab-pane :label="$i18n.t('REPAYMENT_PLAN')" name="repaymentPlan">
            <collection-repayment-plan v-if="activeName === 'repaymentPlan'"></collection-repayment-plan>
        </el-tab-pane>
        <el-tab-pane :label="$i18n.t('REPAYMENT_RECORD')" name="repaymentRecord">
            <collection-repayment-record v-if="activeName === 'repaymentRecord'"></collection-repayment-record>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    import FollowRecord from '@/views/collection/components/HistoryRecord/FollowRecord'
    import CollectionTrack from '@/views/collection/components/HistoryRecord/Track'
    import CollectionCallRecord from '@/views/collection/components/HistoryRecord/CallRecord'
    import CollectionTelApprove from '@/views/collection/components/HistoryRecord/TELApprove'
    import CollectionRepaymentPlan from '@/views/collection/components/HistoryRecord/RepaymentPlan'
    import CollectionRepaymentRecord from '@/views/collection/components/HistoryRecord/RepaymentRecord'
    import CollectionSMSRecord from '@/views/collection/components/HistoryRecord/SMSRecord'

    export default {
        name: 'collectionHistoryRecord',
        components: { CollectionSMSRecord, CollectionRepaymentRecord, CollectionRepaymentPlan, CollectionTelApprove, CollectionCallRecord, CollectionTrack, FollowRecord },
        data () {
            return {
                activeName: 'record'
            }
        }
    }
</script>

<style scoped>

</style>
